We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
Safe Ajax Links – using Jquery
June 8th, 2009
About the author
Hi guys, I am Prathap Beschi, PHP programmer from Balyhoo Advertsing, Chennai, India. I like developing ajax websites, jquery plugins. Follow me on TWITTER.
Introduction
This tutorial is an improvement of How to load content via AJAX in jQuery.
We are going to learn how to make safe ajax links – ajax links that work properly though the browser does not support javascript.
I always worry about ajax links; what if the user’s browser is not enabled javascript?! They can’t go further pages.
Already i have developed some ajax websites, so i want to overcome this problem. We can make a ajax website work properly though there is no javascript with a simple trick. I use Jquery for ajax development, so now i explain this with Jquery.
Step 1: Thinking about the problem and home section
Consider we create an ajax website with 3 pages. Then the following steps will make the trick work.
Create the home page, with page links in a specific class name (here, say ajax-links, so we have links like:
[code language="html"] Contact [/code]
Step 2: The container
Consider the content div(div id=”content”) contains the content for every page, then place this div inside container div(div id=”container”)
Step 3: Including the jQuery core library
You know:
[code language="html"] [/code]
Step 4: Creating the tricky script
[code language="javascript"]
$(document).ready(function(){
//References
var loading = $("#loading");
var container = $("#container2");
var link;
//Manage click events
$("a.ajax-links").click(function(e){
//prevent default action
e.preventDefault();
//show the loading bar
showLoading();
container.slideUp();
//define the target and get content then load it to container
link = $(this).attr("href") + " #content";
container.load(link, hideLoading);
container.slideDown();
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
[/code]
Step 5: Replicate and little final explanation
Create all other (2) pages in this same structure (copy paste the page and change the content area).
Thats all. This script first prevent the default href action, and load the content div into container div from the target page. If javascript not enabled then it will work as normal website.
To understand more clear… let us see an example. Already we have seen this tutorial:
How to load content via AJAX in jQuery, and the source.
Trying the demo
Yo can download the source after applying safe ajax trick, and the DEMO (try to run after turn off javascript in your browser).
Many thanks!
Many thanks to yensdesign.com - Adrián Mato Gondelle for this great opportunity to write here. Also visit my site http://beski.wordpress.com, and tell me how many of you are looking for ajax pagination code? If the need is high i will explain the ajax pagination code with field sort.
Join N10-004 course to learn the best web development techniques to create interactive webpages. Become expert in ajax and Jquesry with other useful web applications using 642-902 guide and 642-813 tutorial.
Totally awesome silver rings is available at LusterForever jewelers stores.
ajax, Fast Tips, jquery
Coding, Tips, Tutorials
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.
Nice~ thank you for shared!
[...] June 9, 2009 Ajax Links – work on no javascript Posted by beski under Tutorial | Tags: ajax, jquery | No Comments Last week i have sent a tutorial to http://www.yensdesign.com about ajax links.(http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/) [...]
[...] June 9, 2009 Ajax Links – that work without javascript Posted by beski under Tutorial | Tags: ajax, jquery | No Comments Last week i have sent a tutorial to http://www.yensdesign.com about ajax links.(http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/) [...]
Good tip. Thanks.
PS: You should register jQuery variables with leading dollar char ($) to separate them with other JS variables.
oh,, this is what i looking for around the time,. eh, i had a problems, when the ajaxify loding has done, the jquery that first exists in my webpage doesn’t work, it’s because the ajaxify loading.??
Very well explained jquery tip and I have thought about the same problem, glad it’s been solved here.
Thank you. That is awesome tut i looking for so long time. Thank you very much! This is so cool!!!
This is so cool!!!
I wonder if you wouldn’t be further ahead if you could load your content if javascript is off into an iframe instead? That way you could still keep the page you may be loading the additional content into.
No idea how to do it, but you should be able to do something like a with an iframe to load into???
Meant to say a ‘no script’ tag. So if your javascript is turned off it writes the iframe in.
[...] we have seen the Magic Link post – a tricky ajax links for making it works with the javascript disabled browsers. Here, we are [...]
any help on linking directly to any one section/page?
@pul Yo mean href.location? Checkout this: http://www.java2s.com/Tutorial/JavaScript/0320__Location/Changelocationhref.htm
hi adrian…
what i need to do is be able to have a url that will take me to a particular section…
http://www.mysite.com/index.html#home
http://www.mysite.com/index.html#news
I’m very (very) green with java… so i’m not sure how to go about that.
I’ve followed this tutorial and got everything in the site working…this is the only hitch :\
i’ve gotten as far as changing the code to read:
switch(this.id){
case “home”:
content.slideUp();
content.load(“home.html”, hideLoading);
window.location.hash=”home”;
content.slideDown();
break;
but although it adds the hash to the url.. it wont actually call up that section when i go to it directly. does that make sense? Sorry i’m probably missing something totally obvious..or making a huge mess..one of the two…
any help would be great. thanks!
U better not show the text(Html conent got from the server) before the ajx call finishes to put the html content into the page(Not Professional)
Wait till it finishes the ajax call then u can show the area that will containes the AjaxHtmlcontent
Cheers
AbrahamBoray
Hi, first thanks for the good work. I had a quesion – Is it possible to use images instead of the links ( home, news, interviews) where the images would have two states (active, and inactive)? Or does the script not allow that?
Hi!
Thank you for your script, very interesting!
I’ve a question. If I want to put of submenu (maybe hidden) inside menu, how can I do?
For example:
– “Home”
– “Product”
— “Thing1″
— “Thing2″
…
- “Contact”
- “About me”
…
Thanks!
Do you have to combine both files by your self? ‘Ajax loading Content’ + this one?
As I look into your files, I don’t see older files, and it works. When i try exact the same,
it seems to go automatically to the version without Javascript enabled. Any important step I might forgotten about?
very thanks
Awesome blog! Do you have any recommendations for aspiring writers? I’m hoping to start my own blog soon but I’m a little lost on everything. Would you advise starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m completely overwhelmed .. Any ideas? Appreciate it!
Pretty nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!
This very blog is obviously awesome and also amusing. I have chosen a bunch of useful things out of it. I’d love to come back again soon. Thanks!
Thanks so much for this! This really helped me today
God Bless
hello there and thank you to your information – I’ve certainly picked up something new from proper here. I did then again expertise several technical issues the use of this website, since I experienced to reload the site a lot of times previous to I may get it to load properly. I had been puzzling over in case your hosting is OK? Now not that I am complaining, but sluggish loading cases occasions will sometimes have an effect on your placement in google and could damage your high quality ranking if advertising and with Adwords. Well I’m adding this RSS to my email and could look out for a lot more of your respective fascinating content. Make sure you replace this again very soon..
Really enjoyable read. There are also many more benefits to guest blogging such as developing professional contacts, improved reputation and more importantly improving connections within the blogging community.
Thanks a lot